<template>
  <div id="app">
    <header class="head">
       <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">量化等级</small>
      </a>
      <a href="javascript:;" class="tr">
        <small class="font_18 co_f"></small>
      </a>
    </header>
    <main>
      <div>
        <mt-navbar v-model="selected">
          <mt-tab-item id='tab-container1'>
            <font class="font_1">量化等级1</font>
          </mt-tab-item>
          <mt-tab-item id='tab-container2'>
            <font class="font_1">量化等级2</font>
          </mt-tab-item>
        </mt-navbar>
        <div class="bor"></div>
        <div class="page-tab-container">
          <mt-tab-container class="page-tabbar-tab-container" v-model="selected" swipeable>
            <mt-tab-container-item id="tab-container1">
              <!-- 量化等级1 -->
                     <div class="none_data"  v-if="this.ScoreData.length==0">
                        <img src="../../../img/tip.png">
                     </div>
                    <div class="mtrademark-list-info"  v-for="(item,index) in ScoreData" >
                      <div class="mtrademark-list-right">
                        <p ng-bind-html="o.name.replace('<em>','')" class="ng-binding">当前等级{{item.enterprise.name}}</p>
                        <p><span class="ng-binding">年度评定等级: {{item.checkYear}}</span></p>
                        <p><span class="ng-binding">累计检查次数:{{item.checkDate}}</span></p>
                         </div>
                    </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="tab-container2">
              <!-- 量化等级2 -->
                   <div class="none_data" v-if="this.ScoreDatatwo.length==0">
                        <img src="../../../img/tip.png" >
                    </div>
                    <div class="mtrademark-list-info"  v-for="(item,index) in ScoreDatatwo">
                      <div class="mtrademark-list-right">
                        <p ng-bind-html="o.name.replace('<em>','')" class="ng-binding">{{item.enterprise.name}}</p>
                        <p><span class="ng-binding">评定年度: {{item.checkYear}}</span></p>
                        <p><span class="ng-binding">评定日期:{{item.checkDate}}</span></p>
                        <p><span class="ng-binding">检查人员: {{item.checkpersonName}}  当前状态：{{item.status}}</span></p>
                         </div>
                        <span id="mtrademark-list-right-status" class="ng-binding">{{item.mainResult}}</span>
                    </div>
            </mt-tab-container-item>
          </mt-tab-container>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
  import {
    QuantitativeLevelData,
    SupervisionScoreData
  } from '../../../api/api';
  import {
    TabContainer,
    TabContainerItem,
    Navbar,
    TabItem
  } from 'mint-ui';
  export default {
    components: {
      'mt-tab-container': TabContainer,
      'mt-tab-container-item': TabContainerItem,
      'mt-navbar': Navbar,
      'mt-tab-item': TabItem
    },
    data() {
      return {
        selected: 'tab-container1',
        ScoreData:[],
        ScoreDatatwo:[],
        data: "",
        PageSize: 10,
        CurrentPage: 1,
        nonedata: false
      };
    },
    methods: {
      //数据加载方法
      getData() {
        let CurrentPageNum = this.CurrentPage
        let varQueryData = {
          PageSize: this.PageSize,
          CurrentPage: this.CurrentPage,
          Query: {
            CriteriaList: []
          }
        }
        let options = {
          params: {
            Unid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
            QueryData: JSON.stringify(varQueryData)
          }
        }
        //调取接口
        QuantitativeLevelData(options).then((res) => {
          if (res.success === true) {
            this.listData = this.listData.concat(res.data);
            if (res.data.length > 0) {
              this.nonedata = false
            } else {
              if (CurrentPageNum == 1) {
                this.nonedata = true
              } else {
                this.nonedata = false
              }
            }
          }
        })
        SupervisionScoreData(options).then((res) => {
          if (res.success === true) {
              this.ScoreDatatwo = res.data.data
          }
        })
      },
    },
    //页面加载时候
    mounted() {
      this.getData();
      this.IssuingAuthority();
    }
  
  }
</script>

<style lang="scss" scoped>
  /*tab*/
  
  .mint-navbar {
    background: #efefef;
    padding: 0% 20%;
  }
  
  .mint-navbar .mint-tab-item.is-selected {
    background: #feaa50;
    color: #fff;
    border-bottom: none;
    margin-bottom: auto;
  }
  
  .mint-tab-item {
    border: 1px solid #feaa50 !important;
    padding: 10px !important;
    margin: 6px 0px
  }
  .mtrademark-list-info {
    padding: 10px 10px;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #ccc;
    display: flex;
    display: -webkit-flex;
    justify-content:space-between;
    align-items:center
    
    }
.mtrademark-list-right {
    float: left;
    line-height: normal;
    margin-left: 10px;
}
.mtrademark-list-right p:first-child{
  margin-bottom: 5px;
  font-size: 16px;
  color: #000
}
.mtrademark-list-right p {
    font-size: 12px;
    color: #43464f;
    display: block;
    margin: 0;
}
.mtrademark-list-right span {
    display: block;
    margin-top: 6px;
}
#mtrademark-list-right-status {
    display: table;
    margin: 10px 0;
    border: 1px solid #5BC67C;
    color: #5BC67C;
    float: left;
    padding: 2px;
    border-radius: 2px;
}
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->
